<template>
    <div class="dataList">
        <van-cell-group>
            <van-cell clickable>
                <!-- 左侧图片 -->
                <template #icon>
                    <van-image
                    width="25" height="25" fit="contain"
                    :src="require('assets/images/pptx.png')"
                    v-if="fileCategory == 'pptx' || fileCategory == 'PPTX'"
                    @click="handleCellClick"
                    />
                    <van-image
                    width="25" height="25" fit="contain"
                    :src="require('assets/images/pdf.png')"
                    v-else-if="fileCategory == 'pdf' || fileCategory == 'PDF'"
                    @click="handleCellClick"
                    />
                    <van-image
                    width="25" height="25" fit="contain"
                    :src="require('assets/images/excel.png')"
                    v-else-if="fileCategory == 'excel' || fileCategory == 'EXCEL'"
                    @click="handleCellClick"
                    />
                    <van-image
                    width="25" height="25" fit="contain"
                    :src="require('assets/images/txt.png')"
                    v-else-if="fileCategory == 'txt' || fileCategory == 'TXT'"
                    @click="handleCellClick"
                    />
                    <van-image
                    width="25" height="25" fit="contain"
                    :src="require('assets/images/pictrue.png')"
                    v-else-if="fileCategory == 'jpg' || fileCategory == 'png' || fileCategory == 'gif' || fileCategory == 'bmp' || fileCategory == 'JPG' || fileCategory == 'PNG' || fileCategory == 'GIF' || fileCategory == 'BMP'"
                    @click="handleCellClick"
                    />
                    <van-image
                    width="25" height="25" fit="contain"
                    :src="require('assets/images/file.png')"
                    v-else-if="fileCategory == 'default'"
                    @click="handleCellClick"
                    />
                    <van-image
                    width="25" height="25" fit="contain"
                    :src="require('assets/images/weizhi.png')"
                    @click="handleCellClick"
                    v-else
                    />
                </template>
                <!-- 左侧标题 -->
                <template #title>
                    <div class="cell_title" @click="handleCellClick">
                        <span class="dataList_title van-ellipsis">{{title}}</span>
                        <van-image class="isCollection" v-if="isCollection" width="12" height="12" fit="contain" :src="require('assets/images/isCollection.png')" />
                        <van-tag class="cell_tag" round plain size="medium" type="primary" v-if="uploadStatus == 0">上传中</van-tag>
                        <van-tag class="cell_tag" round plain size="medium" type="success" v-else-if="uploadStatus == 2">上传成功</van-tag>
                        <van-tag class="cell_tag" round plain size="medium" type="danger" v-else-if="uploadStatus == 1">上传失败</van-tag>
                    </div>
                </template>
                <!-- 标题下方描述 -->
                <template #label>
                    <p class="dataList_label shareLabel" v-if="isShare">{{receiveShareLabel}}</p>
                    <p class="dataList_label shareLabel" v-if="isFriendShare">{{receiveFriendShareLabel}}</p>
                    <p class="dataList_label">{{label}}</p>
                </template>
                <!-- 右侧图标 -->
                <template #right-icon>
                    <van-image v-if="isRightIcon" v-show="!isTouch" width="18" height="18" fit="contain" :src="require('assets/images/file-rightIcon.png')" @click="handleDetailsClick" />
                    <van-checkbox :name="index" v-if="isCollectionPage" icon-size="15" @click="IsCollectionClick" />
                    <van-checkbox :name="index" v-else v-show="isTouch && index == menuParameter.idArr || isTouch && isCheckbox" icon-size="15" />
                </template>
            </van-cell>
        </van-cell-group>
    </div>
</template>

<script>
export default {
    name: 'dataList',
    props: {
        // 标题
        title: {
            type: String,
            default: ''
        },
        // 描述
        label: {
            type: String,
            default: ''
        },
        // 是否收藏
        isCollection: {
            type: Boolean,
            default: false
        },
        // 是否长按
        isTouch: {
            type: Boolean,
            default: false
        },
        // 复选框标识
        index: {
            type: Number,
            default: 0
        },
        // 上传状态码
        uploadStatus: {
            type: Number
        },

        // 是否为分享栏目
        isShare: {
            type: Boolean,
            default: false
        },
        // 分享栏目描述
        shareLabel: {
            type: Array,
            default: function(){
                return []
            }
        },
        // 是否为好友分享
        isFriendShare: {
            type: Boolean,
            default: false
        },
        // 好友分享 分享人
        friendShareLabel: {
            type: String,
            default: ''
        },
        // 文件类型和文件夹ID对象
        DetailsArr: {
            type: Object,
            default: function(){
                return {}
            }
        },
        // 是否显示右侧详情箭头
        isRightIcon: {
            type: Boolean,
            default: true
        },
        // 只能单选时需要显示的选中的id
        menuParameter: {
            type: Object,
            default: function() {
                return {}
            }
        },
        // 是否为收藏页, 用于默认显示复选框
        isCollectionPage: {
            type: Boolean,
            default: false
        },
        // 点击当前cell的对象信息
        currentItem: {
            type: Object,
            default: function() {
                return {}
            }
        },
        // 是否可多选, 用于文件页面多选操作
        isCheckbox: {
            type: Boolean,
            default: false
        },
        // 文件类型，用于图标显示
        fileCategory: {
            type: String,
            default: 'default'
        }
    },
    data(){
        return {
            
        }
    },
    methods:{
        // 跳转详情页
        handleDetailsClick(){
            // console.log(this.DetailsArr)
            // this.$router.push({name: 'Details', params: {fileId: this.DetailsArr.fileId, type: this.DetailsArr.type}})
            // let obj = {
            //     fileId: this.DetailsArr.fileId,
            //     type: this.DetailsArr.type
            // }
            // this.$emit('handleDetailsClick', obj)
            this.$emit('handleDetailsClick', this.DetailsArr)
        },
        // 监听cell单元格点击事件, 用于跳转文件夹子文件
        handleCellClick(){
            this.$emit('handleCellClick', this.currentItem)
        },
        // 单选点击事件
        IsCollectionClick(){
            this.$emit('IsCollectionClick', true)
        }
    },
    computed: {
        receiveShareLabel(){
            let arr = this.shareLabel
            // console.log(arr)
            if(arr != null){
                let receiveArr = []
                receiveArr = arr.map(item => {
                    return item.groupName
                })
                if(receiveArr.length > 1){
                    return '分享给： ' + receiveArr.toString('，')
                }else{
                    return '分享给： ' + receiveArr[0]
                }
            }
        },
        receiveFriendShareLabel(){
            return '分享人： ' + this.friendShareLabel
        }
    }
}
</script>

<style lang="less" scoped>
.dataList /deep/ .van-cell-group{
    margin: 0 -15px;
}
.dataList /deep/ .van-cell{
    align-items: center;
    padding: 12px 15px;
}
.dataList /deep/ .van-cell .van-image:first-child{
    margin-right: 15px;
}
.dataList /deep/ .van-cell__label{
    line-height: 12px;
    margin-top: 0;
}
.cell_title{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .dataList_title{
        color: #2a2b2d;
        font-size: 14px;
        display: inline-block;
        margin-right: 10px;
        max-width: 180px;
    }
    .isCollection{
        margin-right: 10px;
    }
    .cell_tag{
        transform-origin: left;
        transform: scale(.75);
    }
}

.dataList_label{
    font-size: 12px;
    color: #a5aeb7;
    // transform: scale(.83);
    // transform-origin: left;
}
.shareLabel{
    margin-bottom: 3px;
}
</style>